<template>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" status-icon label-width="100px" class="demo-ruleForm">
        <el-form-item label=" ">
            <div class="">
                重置密码
            </div>
        </el-form-item>
        <div v-show="nextShow == false">
            <el-form-item label=" " prop="phone">
                <div class="input-wrapper">
                    <input type="text" v-model="ruleForm.phone" class="text-input text" placeholder=" "
                        autocomplete="off">
                    <label class="input-label">手机号</label>
                </div>
            </el-form-item>
            <el-form-item label=" ">
                <div class="input-wrapper input-width">
                    <input type="text" v-model="ruleForm.code" class="text-input text" placeholder=" "
                        autocomplete="off">
                    <label class="input-label">验证码</label>
                    <el-button type="default" v-if="able==false" class="posa3" @click="sendCode('ruleForm')">
                        {{sendcodetext}}
                    </el-button>
                    <el-button type="default" v-else class="posa3">{{miao}}s</el-button>
                </div>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" class="btn" @click="submitCode()">下一步</el-button>
            </el-form-item>
        </div>
        <div v-show="nextShow == true">
            <el-form-item label=" ">
                <div class="">
                    验证成功，请设置新密码
                </div>
            </el-form-item>
            <el-form-item label=" " prop="password">
                <div class="input-wrapper">
                    <input type="password" v-model="ruleForm.password" class="text-input text" placeholder=" "
                        autocomplete="off">
                    <label class="input-label">输入密码</label>
                </div>
            </el-form-item>
            <el-form-item label=" ">
                <div class="input-wrapper" prop="checkPass">
                    <input type="password" v-model="ruleForm.checkPass" class="text-input text" placeholder=" "
                        autocomplete="off">
                    <label class="input-label">输入密码</label>
                </div>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" class="btn" @click="handleDone">完成</el-button>
            </el-form-item>
        </div>
        <el-form-item>
            <el-col class="tc cp" style="color: rgb(173, 173, 173);" @click.native="handleReturn">返回登录</el-col>
        </el-form-item>
    </el-form>
</template>

<script>
    export default {
        data() {
            var validatePhone = (rule, value, callback) => {
                let myreg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
                if (value === '') {
                    callback(new Error('请输入手机号'));
                } else if (!myreg.test(value) || value.length != 11) {
                    callback(new Error('手机号格式错误'));
                } else {
                    callback();
                }
            };
            var validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'));
                } else {
                    if (this.ruleForm.checkPass !== '') {
                        this.$refs.ruleForm.validateField('checkPass');
                    }
                    callback();
                }
            };
            var validatePass2 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.ruleForm.pass) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
            return {
                user: this.$store.state.user,
                ruleForm: {
                    password: '',
                    checkPass: '',
                    phone: '',
                    code: ''
                },
                rules: {
                    phone: [{
                        validator: validatePhone,
                        trigger: 'blur'
                    }],
                    password: [{
                        required: true,
                        validator: validatePass,
                        trigger: 'blur'
                    }],
                    checkPass: [{
                        required: true,
                        validator: validatePass2,
                        trigger: 'blur'
                    }],
                },
                nextShow: false,
                sendcodetext: '获取验证码',
                miao: 60,
                able: false,
                timer: null,
                showlogin: false,
                authcode: '',
            }
        },
        mounted() {},
        methods: {
            handleDone() {
                this.$refs['ruleForm'].validate((valid) => {
                    if (valid) {
                        let url = '/modifypwd';
                        let params = {
                            mobile: this.ruleForm.phone,
                            msg: this.ruleForm.code,
                            pwd: this.ruleForm.password
                        }
                        this.$ajax.post(url, params).then(res => {
                            if (res.code == 0) {
                                console.log('完成修改密码');
                                this.$message.success('修改成功')
                                this.handleReturn()
                                this.$emit('handleClose')
                                this.nextShow = false
                            } else {
                                this.$message.error(res.msg)
                            }
                        })

                    } else {}
                })

            },
            handleReturn() {
                this.$emit('handleForget', false)
                if (this.nextShow) {
                    this.nextShow = !this.nextShow
                }
            },
            //如果展示输入密码则 nextshow = false
            handleCloseNextShow() {
                if (this.nextShow) {
                    this.nextShow = false
                }
            },
            handletNextShow() {

            },

            //发送验证码
            sendCode() {

                if (this.ruleForm.phone != '') {
                    let url = '/getMobileMsg';
                    this.$ajax.post(url, {
                        mobile: this.ruleForm.phone,
                        // authCode: this.authcode
                    }).then(res => {
                        if (res.code == 0) {
                            this.getCode()
                        } else {
                            this.$message.error(res.msg)
                        }
                    })
                } else {
                    this.$message.warning("手机号不能为空")
                }
            },
            getCode() {
                if (!this.timer) {
                    // 通知验证码组件内部开始倒计时
                    this.miao = 60;
                    this.able = true;
                    this.timer = setInterval(() => {
                        if (this.miao > 0 && this.miao <= 60) {
                            this.miao--;
                            if (this.miao == 1) {
                                this.authcode = "";
                                this.sendcodetext = '重新发送'
                            }
                        } else {
                            clearInterval(this.timer)
                            this.able = false;
                            this.timer = null
                        }
                    }, 1000);
                }
            },
            handleNext() {
                this.$refs['ruleForm'].validate((valid) => {
                    if (valid) {
                        this.nextShow = true
                    } else {}
                })
            },
            submitCode() {
                this.nextShow = true
                this.$refs['ruleForm'].validate((valid) => {
                    if (valid) {

                        let url = '/loginByMobileMsg';
                        let params = {
                            mobile: this.ruleForm.phone,
                            msg: this.ruleForm.code
                        };
                        this.$ajax.post(url, params).then(res => {
                            if (res.result == "none") {
                                this.$message.error('无此用户,请先注册');
                            } else {
                                this.nextShow = true
                            }
                        })
                    } else {}
                })

            },

        }
    }
</script>

<style scoped lang="scss">
    @import "style.scss";
</style>
